<template>
        
        <h2>组合和选项差异点</h2>
        <pre>
            <code>
                /**
                * 传统vue2方式配合setup实现新的组合式API
                */
                export default {
                    data () {
                        return {
                            name2: 'Vue3',
                            // 可以访问到setup声明并返回的数据
                            oldName: this.name
                        }
                    }
                    
                    // 这里可以按照vue3的方式来写，声明周期较早，无法读取到vue2的data数据
                    setup () {
                        const name = ref('王五')
                        
                        function checkName() {
                            console.log(name.value == '王五'? '是王五' : '不是王五');
                        }
                        // 无论方法还是属性，需要返回，才能被模板读取到。
                        return {name,checkName}
                    }
                }
            </code>
        </pre>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>